<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智教慧学全景云平台</title>
    <!-- 引入图标库增强视觉表现 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            transition: all 0.3s ease; /* 全局过渡效果，提升交互流畅度 */
        }
        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.7;
        }

        /* 1. 头部美化：调整为左上角标题+右上角登录按钮+纯白色背景 */
        .header {
            background-color: #ffffff; /* 纯白色背景 */
            color: #333333; /* 深色文字，提高对比度 */
            padding: 10px 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影区分头部与内容 */
            position: relative;
        }
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between; /* 使标题和登录按钮分居两侧 */
        }
        .header-title {
            display: flex;
            align-items: center;
        }
        .header h1 {
            font-size: 1.2em; /* 标题尺寸 */
            margin: 0;
            font-weight: 600;
        }
        .header p {
            font-size: 0.85em;
            opacity: 0.8;
            margin-left: 8px;
            color: #666;
        }
        /* 登录按钮样式 */
        .login-btn-header {
            padding: 8px 18px;
            background: linear-gradient(90deg, #4361ee, #b5179e);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 500;
            font-size: 0.95em;
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
        }
        .login-btn-header:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.4);
            background: linear-gradient(90deg, #3a56d4, #a01489);
        }

        /* 2. 导航栏：与头部整合，保持悬浮效果 */
        .nav-bar {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 100; /* 固定在顶部，避免被遮挡 */
        }
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;
        }
        .nav-bar a {
            float: left;
            display: block;
            color: #495057;
            text-align: center;
            padding: 16px 20px;
            text-decoration: none;
            font-weight: 500;
            position: relative;
        }
        .nav-bar a:hover {
            color: #4361ee;
        }
        /* 导航下划线动画 */
        .nav-bar a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #4361ee, #b5179e);
            transition: width 0.3s ease;
        }
        .nav-bar a:hover::after {
            width: 100%;
        }
        .nav-bar a.active {
            color: #4361ee;
        }
        .nav-bar a.active::after {
            width: 100%;
        }

        /* 3. 英雄区：动态背景+按钮增强 */
        .hero {
            position: relative;
            background: url('https://picsum.photos/id/20/1920/700') no-repeat center;
            background-size: cover;
            height: 70vh;
            min-height: 500px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: linear-gradient(135deg, rgba(67, 97, 238, 0.7), rgba(181, 23, 158, 0.7));
        }
        .hero-content {
            position: relative;
            max-width: 800px;
            padding: 0 20px;
        }
        .hero h2 {
            font-size: 3.5em;
            margin-bottom: 20px;
            text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
            animation: fadeInUp 1s ease; /* 入场动画 */
        }
        .hero p {
            font-size: 1.6em;
            margin-bottom: 30px;
            opacity: 0.95;
            animation: fadeInUp 1s ease 0.3s both; /* 延迟动画 */
        }
        /* 按钮美化：渐变+阴影+悬浮放大 */
        .btn {
            display: inline-block;
            padding: 14px 30px;
            font-size: 1.3em;
            color: #fff;
            background: linear-gradient(90deg, #4361ee, #b5179e);
            border: none;
            border-radius: 50px; /* 圆角增强 */
            cursor: pointer;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
            font-weight: 500;
            animation: fadeInUp 1s ease 0.6s both;
        }
        .btn:hover {
            transform: translateY(-3px); /* 悬浮上移 */
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.5);
            background: linear-gradient(90deg, #3a56d4, #a01489);
        }

        /* 4. 功能区：卡片升级+图标可视化 */
        .features {
            padding: 80px 20px;
            background-color: #fff;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .feature {
            background: #fff;
            padding: 40px 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            text-align: center;
            border-top: 4px solid transparent;
            background-clip: padding-box;
        }
        /* 不同卡片顶部渐变区分 */
        .feature:nth-child(1) {
            border-top-color: #4361ee;
        }
        .feature:nth-child(2) {
            border-top-color: #b5179e;
        }
        .feature:nth-child(3) {
            border-top-color: #3f37c9;
        }
        .feature:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
        }
        /* 功能图标美化 */
        .feature-icon {
            font-size: 3.5em;
            margin-bottom: 25px;
            background: linear-gradient(90deg, #4361ee, #b5179e);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .feature h3 {
            font-size: 1.8em;
            margin-bottom: 15px;
            color: #2d3748;
        }
        .feature p {
            font-size: 1.1em;
            color: #64748b;
            line-height: 1.8;
        }

        /* 5. 模块区：标题装饰+卡片布局 */
        .section {
            padding: 80px 20px;
            background-color: #f8f9fa;
        }
        .section-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        /* 标题美化：下划线+渐变 */
        .section-title {
            text-align: center;
            font-size: 2.8em;
            margin-bottom: 60px;
            color: #2d3748;
            position: relative;
            padding-bottom: 20px;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: linear-gradient(90deg, #4361ee, #b5179e);
            border-radius: 2px;
        }
        /* 子模块：卡片化布局 */
        .subsection {
            background: #fff;
            padding: 35px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
            margin-bottom: 25px;
        }
        .subsection:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
        }
        .subsection h3 {
            font-size: 1.6em;
            margin-bottom: 15px;
            color: #4361ee;
            display: flex;
            align-items: center;
        }
        /* 子模块标题图标 */
        .subsection-icon {
            margin-right: 12px;
            font-size: 1.3em;
        }
        .subsection p {
            font-size: 1.1em;
            color: #64748b;
            line-height: 1.8;
        }

        /* 6. 资源下载展示区 */
        .resources-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }
        .resource-card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .resource-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(67, 97, 238, 0.1);
        }
        .resource-img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            background-color: #f1f5f9;
        }
        .resource-info {
            padding: 15px;
        }
        .resource-title {
            font-weight: 600;
            margin-bottom: 8px;
            color: #2d3748;
        }
        .resource-meta {
            font-size: 0.9em;
            color: #94a3b8;
            margin-bottom: 12px;
        }
        .download-btn {
            display: inline-block;
            width: 100%;
            padding: 8px 0;
            text-align: center;
            background-color: #4361ee;
            color: white;
            border-radius: 6px;
            text-decoration: none;
            font-size: 0.95em;
            transition: background-color 0.3s ease;
        }
        .download-btn:hover {
            background-color: #3a56d4;
        }

        /* 7. 登录注册区：渐变背景+表单美化 */
        .login-register {
            padding: 80px 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #f0f2ff 100%);
        }
        .login-container {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 50px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(67, 97, 238, 0.1);
        }
        .login-container h2 {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 40px;
            color: #2d3748;
        }
        /* 表单组美化 */
        .form-group {
            margin-bottom: 25px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            text-align: left;
            font-size: 1.1em;
            color: #495057;
            font-weight: 500;
        }
        .form-control {
            width: 100%;
            padding: 14px 20px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1.1em;
            color: #2d3748;
            background-color: #f8fafc;
        }
        .form-control:focus {
            outline: none;
            border-color: #4361ee;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
            background-color: #fff;
        }
        /* 登录按钮居中 */
        .login-btn {
            width: 100%;
            padding: 15px;
            font-size: 1.2em;
        }
        /* 注册链接美化 */
        .register-link {
            margin-top: 20px;
            text-align: center;
            font-size: 1.1em;
            color: #64748b;
        }
        .register-link a {
            color: #4361ee;
            text-decoration: none;
            font-weight: 500;
        }
        .register-link a:hover {
            color: #3a56d4;
            text-decoration: underline;
        }

        /* 8. 页脚：渐变背景+信息分区 */
        .footer {
            background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
            color: #fff;
            padding: 60px 20px 30px;
        }
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        .footer-col h3 {
            font-size: 1.6em;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
        }
        .footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #4361ee, #b5179e);
            border-radius: 2px;
        }
        .footer-col p {
            font-size: 1.05em;
            color: #cbd5e1;
            margin-bottom: 15px;
        }
        /* 联系方式图标 */
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            color: #cbd5e1;
            font-size: 1.05em;
        }
        .contact-icon {
            margin-right: 12px;
            color: #4361ee;
            font-size: 1.2em;
        }
        /* 版权信息 */
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #94a3b8;
            font-size: 1em;
        }

        /* 9. 动画关键帧定义 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 10. 响应式适配：确保移动端体验 */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.1em;
            }
            .header-content {
                flex-direction: row;
                align-items: center;
            }
            .header-title {
                flex-direction: column;
                align-items: flex-start;
            }
            .header p {
                font-size: 0.8em;
                margin-left: 0;
                margin-top: 3px;
            }
            .login-btn-header {
                padding: 6px 14px;
                font-size: 0.9em;
            }
            .nav-container {
                justify-content: center;
                flex-wrap: wrap;
            }
            .nav-bar a {
                padding: 14px 12px;
                font-size: 0.95em;
            }
            .hero h2 {
                font-size: 2.5em;
            }
            .hero p {
                font-size: 1.3em;
            }
            .section-title {
                font-size: 2.2em;
            }
            .features {
                padding: 60px 20px;
            }
            .feature h3 {
                font-size: 1.5em;
            }
            .login-container {
                padding: 30px 20px;
            }
            .resources-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            .footer-container {
                gap: 30px;
            }
        }

        @media (max-width: 480px) {
            .hero {
                height: 60vh;
                min-height: 400px;
            }
            .btn {
                padding: 12px 24px;
                font-size: 1.1em;
            }
            .subsection {
                padding: 25px 20px;
            }
            .subsection h3 {
                font-size: 1.4em;
            }
            .header-content {
                flex-wrap: wrap;
            }
            .login-btn-header {
                margin-top: 10px;
                width: 100%;
            }
        }
    </style>
</head>
<body>

<div class="header">
    <div class="header-content">
        <div class="header-title">
            <h1>智教慧学全景云平台</h1>
            <p>学径导航，知心学伴</p>
        </div>
        <a href="#login" class="login-btn-header">
            <button class="btn" onclick="window.location.href='denglu.html'">登录</button>
        </a>
    </div>
</div>

<div class="nav-bar">
    <div class="nav-container">
        <a href="#home" class="active">首页</a>
        <a href="#resources">资源管理</a>
        <a href="#courses">课程管理</a>
        <a href="#downloads">资源下载</a>
        <a href="#about">关于我们</a>
        <a href="#contact">联系我们</a>
    </div>
</div>

<div id="home" class="hero">
    <div class="hero-content">
        <h2>开启智慧教育新体验</h2>
        <p>利用先进的技术，为教师和学生提供高效、便捷的学习与教学环境。</p>
        <button class="btn" onclick="window.location.href='xuanze.html'"> 立即体验</button>
    </div>
</div>

<div class="features">
    <div class="feature">
        <i class="fa fa-graduation-cap feature-icon"></i>
        <h3>高效学习</h3>
        <p>利用AI技术实现个性化学习路径推荐，帮助学生找到最适合自己的学习方式。</p>
    </div>
    <div class="feature">
        <i class="fa fa-share-alt feature-icon"></i>
        <h3>资源共享</h3>
        <p>提供丰富的教育资源库，支持教师和学生上传下载，促进知识的传播与共享。</p>
    </div>
    <div class="feature">
        <i class="fa fa-tasks feature-icon"></i>
        <h3>便捷管理</h3>
        <p>轻松管理课程与作业，提高教学效率，让教师能够专注于教学质量的提升。</p>
    </div>
</div>

<div id="resources" class="section">
    <div class="section-container">
        <h2 class="section-title">资源管理</h2>
        <div class="subsection">
            <h3><i class="fa fa-upload subsection-icon"></i>资源上传</h3>
            <p>教师可上传个人教学资源并关联课程；教研组成员可在团队空间内协同上传共享资料，支持多种格式文件批量上传。</p>
        </div>
        <div class="subsection">
            <h3><i class="fa fa-folder-open subsection-icon"></i>资源分类</h3>
            <p>系统采用"三级树状分类模型"，支持统一标准与个性化自定义结合，便于系统化归类。可按学科、学段、资源类型等多维度分类。</p>
        </div>
        <div class="subsection">
            <h3><i class="fa fa-search subsection-icon"></i>资源检索</h3>
            <p>支持多维度搜索，包括关键词、学科、学段、知识点标签等，搜索结果按相关性排序，并提供预览功能。</p>
        </div>
        <div class="subsection">
            <h3><i class="fa fa-lock subsection-icon"></i>资源权限</h3>
            <p>支持查看、下载、编辑、共享和管理权限设置，可设置私有、班级可见、学校可见或全平台共享等多级权限。</p>
        </div>
    </div>
</div>

<div id="downloads" class="section">
    <div class="section-container">
        <h2 class="section-title">热门资源下载</h2>
        <div class="subsection">
            <h3><i class="fa fa-download subsection-icon"></i>推荐教学资源</h3>
            <p>以下是平台精选的优质教学资源，涵盖各学科各学段，可直接下载使用或收藏至个人资源库。</p>
            
            <div class="resources-grid">
                <div class="resource-card">
                    <img src="https://picsum.photos/id/24/400/400" alt="数学教学课件封面" class="resource-img">
                    <div class="resource-info">
                        <div class="resource-title">高中数学必修一课件</div>
                        <div class="resource-meta">2.4MB · 课件 · 1238下载</div>
                        <a href="#" class="download-btn"><i class="fa fa-download"></i> 下载</a>
                    </div>
                </div>
                
                <div class="resource-card">
                    <img src="https://picsum.photos/id/42/400/400" alt="物理实验视频封面" class="resource-img">
                    <div class="resource-info">
                        <div class="resource-title">物理实验演示视频集</div>
                        <div class="resource-meta">186MB · 视频 · 856下载</div>
                        <a href="#" class="download-btn"><i class="fa fa-download"></i> 下载</a>
                    </div>
                </div>
                
                <div class="resource-card">
                    <img src="https://picsum.photos/id/65/400/400" alt="英语听力材料封面" class="resource-img">
                    <div class="resource-info">
                        <div class="resource-title">初中英语听力训练</div>
                        <div class="resource-meta">45MB · 音频 · 2103下载</div>
                        <a href="#" class="download-btn"><i class="fa fa-download"></i> 下载</a>
                    </div>
                </div>
                
                <div class="resource-card">
                    <img src="https://picsum.photos/id/96/400/400" alt="历史教学素材封面" class="resource-img">
                    <div class="resource-info">
                        <div class="resource-title">中国历史时间轴图表</div>
                        <div class="resource-meta">3.7MB · 图表 · 765下载</div>
                        <a href="#" class="download-btn"><i class="fa fa-download"></i> 下载</a>
                    </div>
                </div>
                
                <div class="resource-card">
                    <img src="https://picsum.photos/id/119/400/400" alt="化学公式手册封面" class="resource-img">
                    <div class="resource-info">
                        <div class="resource-title">化学公式速查手册</div>
                        <div class="resource-meta">1.2MB · 文档 · 1542下载</div>
                        <a href="#" class="download-btn"><i class="fa fa-download"></i> 下载</a>
                    </div>
                </div>
                
                <div class="resource-card">
                    <img src="https://picsum.photos/id/142/400/400" alt="生物教学插图封面" class="resource-img">
                    <div class="resource-info">
                        <div class="resource-title">生物细胞结构插图集</div>
                        <div class="resource-meta">8.5MB · 图片 · 987下载</div>
                        <a href="#" class="download-btn"><i class="fa fa-download"></i> 下载</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="courses" class="section">
    <div class="section-container">
        <h2 class="section-title">课程管理</h2>
        <div class="subsection">
            <h3><i class="fa fa-plus-circle subsection-icon"></i>课程创建</h3>
            <p>填写基础信息如课程名称、所属学科、授课学段等，并设置教学周期与时间安排，支持导入课程模板快速创建。</p>
        </div>
        <div class="subsection">
            <h3><i class="fa fa-pencil subsection-icon"></i>课程编辑</h3>
            <p>调整开课/结课时间，增删教学周次，重新分配章节进度，并进行发布与可见性设置，支持课程内容的批量调整。</p>
        </div>
        <div class="subsection">
            <h3><i class="fa fa-eye subsection-icon"></i>课程发布/下架</h3>
            <p>切换课程状态，例如"私有"、"校内公开"或"平台推荐"，修改后立即生效，支持课程发布前预览功能。</p>
        </div>
        <div class="subsection">
            <h3><i class="fa fa-lightbulb-o subsection-icon"></i>使用建议</h3>
            <p>建议在非高峰教学时段进行大规模结构调整，并使用"模板备份"功能定期保存课程版本，防止数据丢失。</p>
        </div>
    </div>
</div>

<!-- <div id="login" class="login-register">
    <div class="login-container">
        <h2>用户登录</h2>
        <form action="#" method="post">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" class="form-control" required>
            </div>
            <button type="submit" class="btn login-btn">登录</button>
        </form>
        <div class="register-link">
            <p>还没有账号？<a href="#register">立即注册</a></p>
            <p style="margin-top: 10px;"><a href="#forgot">忘记密码？</a></p>
        </div>
    </div>
</div> -->

<div class="footer">
    <div class="footer-container">
        <div class="footer-col">
            <h3>关于平台</h3>
            <p>智教慧学全景云平台致力于为教育工作者和学习者提供全方位的智慧教育解决方案，促进教育资源共享与高效利用。</p>
        </div>
        <div class="footer-col">
            <h3>快速链接</h3>
            <p><a href="#home" style="color: #cbd5e1; text-decoration: none;">首页</a></p>
            <p><a href="#resources" style="color: #cbd5e1; text-decoration: none;">资源管理</a></p>
            <p><a href="#courses" style="color: #cbd5e1; text-decoration: none;">课程管理</a></p>
            <p><a href="#downloads" style="color: #cbd5e1; text-decoration: none;">资源下载</a></p>
        </div>
        <div class="footer-col">
            <h3>联系我们</h3>
            <div class="contact-item">
                <i class="fa fa-envelope contact-icon"></i>
                <span>477712169@qq.com</span>
            </div>
            <div class="contact-item">
                <i class="fa fa-phone contact-icon"></i>
                <span>15631606560</span>
            </div>
            <div class="contact-item">
                <i class="fa fa-map-marker contact-icon"></i>
                <span>北京北大方正软件职业技术学院</span>
            </div>
        </div>
    </div>
    <div class="copyright">
        <p>版权所有 © 智教慧学全景云平台 2025 | 京ICP备12345678号</p>
    </div>
</div>

</body>
</html>
